<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">拼团标题:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class="m-50-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">是否开启:</span>
        <el-radio v-model="open_radio" :label="0">是</el-radio>     
        <el-radio v-model="open_radio" :label="1">否</el-radio>     
      </div>
    </div>
    <div class='flex m-30-t'>
      <span class="title bold " style="width: 120px">设置拼团商品:</span>
      <div class='' style="width: 100%">
        <div v-if="setting_goods" class="m-30-b">
          <div>
            <span>商品名称:</span>
            <span class='m-100-l'>{{good_name}}</span>
          </div>
          <div class="app-row m-30-t">
            <span>展示图片:</span>
            <div class='m-100-l'>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
            
          </div>
          <div class="app-row m-30-t">
            <span>拼团价格:</span>
            <div class="m-100-l">
              <div class='app-row'>
                <el-input v-model="assemble_price_value" placeholder="填写数字"></el-input>
                <span class="width-150 m-50-l">目前原价: </span><span>{{original_price}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="gray-line"></div>
        <el-button type="primary" class='m-10-t' @click="choose_goods">选择商品</el-button>
        <div class='annotation m-10-t'>
          <span>* 选择要拼团的商品</span>
        </div>
      </div>
      
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="bold " style="width: 120px">设置成团人数:</span>
        <el-input class='flex-1' placeholder="请设置大于2的整数值" v-model="people_value"></el-input>
      </div>
      <div class='annotation m-10-t m-114-l' >
        <span>* 多少人可以成团，必须大于2以上的整数</span>
      </div>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">排序:</span>
      <el-input class='flex-1' v-model="rank_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">介绍:</span>
      <div style="width: 90%">
       <el-input type="textarea" :rows="4" v-model="text_value" placeholder="请输入内容"></el-input>

      </div>
    </div>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加拼团</el-button>
    </div>
    <el-dialog
      title="选择要拼团的商品"
      :visible.sync="choose_dialog"
      width="30%">
      <el-select style="width:70%" v-model="good_value" placeholder="请选择" @change="choose_good_item">
        <el-option
          v-for="item in good_options"
          :key="item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="choose_dialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm_button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import goods_request from "@/api/goods_request"
  import group_buying_request from "@/api/group_buying_request"
  export default {
    name: 'group_buying_add',
    data() {
      return {
        name_value: "",
        description_value: "",
        url_value: "",
        open_radio: 0,
        assemble_price_value: '',
        choose_dialog: false,
        setting_goods: false,
        text_value: '',
        rank_value: 0,
        people_value: '',
        good_options: '',
        good_value: '',
        good_id: '',
        original_price: '',
        good_name: '',
      }
    },
    created() {
      this.get_list()
  
    },
    mounted() {
  
    },
    methods: {
      get_detail(id) {
        let params = {
          id
        }
        goods_request.detail_goods(params, res=> {
          this.original_price = res.data.sell_price
          this.good_name = res.data.name
        })
      },
      choose_good_item(e) {
        this.good_id = e
        this.get_detail(e)
        this.choose_dialog = false
        this.setting_goods = true
      },
      get_list() {
        let params = {
          pageSize: 100, page: 1
        }
        goods_request.goods_list( params, res=> {
          let good_options = []
          for (let item of res.data) {
            if (item.is_del!=2) {
              good_options.push(item)
            }
          } 
          this.good_options = good_options
        })
      },
      add_button() {
        if (this.name_value == '') {
          this.$message.error("请输入拼团标题")
          return
        }
        if (this.people_value == '') {
          this.$message.error("请设置成团人数")
          return
        }
        if (this.rank_value == '') {
          this.$message.error("请填写排序")
          return
        }
        if (this.assemble_price_value == '') {
          this.$message.error("请填写拼团价格")
          return
        }
        if (this.good_id == '') {
          this.$message.error("请选择拼团商品")
          return
        }
        
        let params = {
          title: this.name_value,
          goods_id: this.good_id,
          limit_nums: this.people_value,
          sort: this.rank_value,
          assemble_price: this.assemble_price_value,
          is_close: this.open_radio,
          // description: this.description_value,

        }
        group_buying_request.add_group_buying(params, res=> {
          this.$router.push('/marketing/group_buying')
        })
      },
      choose_goods() {
        this.choose_dialog = true
      },
      confirm_button() {
        this.choose_dialog = false
        this.setting_goods = true
      }

    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>